 <!DOCTYPE html>
<html>
<head>
    <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>laymi开发平台-基础表格</title>
    <meta name="keywords" content="laymi快速开发平台,后台bootstrap框架,JFina,后台HTML,响应式后台">
    <meta name="description" content="laymi是一个完全响应式，基于Bootstrap3，JFinal的最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link rel="stylesheet" href="js/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="css/plugins/iCheck/custom.css"  media="all">

</head>
<body class="gray-bg">
<script type="text/html" id="demo">
#[[{{#  layui.each(d.list, function(index, item){ }}

                                <tr>
                                    <td width="1%">
                                    {{index+1}}
                                    </td>
                                    <td width="1%">
                                    <input value="{{item.id}}" type="checkbox"  class="i-checks i" name="input[]">
                                    </td>
     	                               <td>{{item.tableName}}</td>
      
  	                               <td>{{item.tableComment}}</td>
      
  	                               <td>{{item.formClass}}</td>
      
  	                               <td>{{item.version}}</td>
      
                                    <td width="10%">
                                    <p>
                                    <button value="{{item.id}}" class="btn btn-danger btn-xs delone" type="button">
                                    <i class="fa fa-upload"></i>&nbsp;&nbsp;
                                    <span class="bold">删除</span>
                                    </button>
                                                    </p>
                                    </td>
                                </tr> 
{{#  }); }}]]#
    </script>
                     <div class="ibox-content">
                       <form role="form" id="form" action="/gTable/list/1-10" class="form-inline" method="post">
                            <div class="form-group">
                                <label for="exampleInputEmail2" class="control-label">表名:</label>
                                <input type="text" name="tableName" placeholder="表名"  class="form-control">
                                <input type="text" name="tableName" placeholder="表名" value="=" hidden="" readonly="readonly">
                            </div>
                        </form>
                   </div>
                   <div class="ibox-content">
                        <p >
                        <button id="edit" class="btn btn-success btn-xs" type="button"><i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">编辑</span>
                        </button>
                        <button id="gStart" class="btn btn-warning btn-xs" type="button"><i class="fa fa-warning"></i> <span class="bold">代码生成</span>
                        </button>
                        <button id="synDataBase" class="btn btn-default btn-xs" type="button"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;同步数据库</button>
                       <button id="resetting" style="float:right;" class="btn btn-default btn-xs" type="button"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;重置</button>
                       <span style="float:right;">&nbsp;&nbsp; </span> 
                       <button id="search" style="float:right;" class="btn btn-default btn-xs" type="button"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;查询</button>
                    </p>
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr >
                                    <th>序号</th>
                                    <th>
                                    <input id="checkAll"  type="checkbox"  class="i-checks" ">
                                    </th>
                                    <th>表名</th>
                                    <th>表描述</th>
                                    <th>表单分类</th>
                                    <th>版本</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="view">
                            </tbody>
                        </table>
                        <div id="page"></div>
                    </div>

    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>

    <!-- iCheck -->
    <script src="js/plugins/iCheck/icheck.min.js"></script>

    <!-- jquery-form -->
    <script type="text/javascript" src="/js/laymi/jquery-form.js"></script>
    
    <!-- layui -->
    <script type="text/javascript" src="/js/layui/layui.js"></script>
    <script type="text/javascript">
    function list(curr){
    	$("#form").attr("action","/g/list/"+curr+"-"+10);
    	$("#form").ajaxSubmit({
			success:function(res){
				layui.use(['laypage', 'layer', 'laytpl'], function(){
					  var laypage = layui.laypage
					  ,layer = layui.layer
					  ,laytpl = layui.laytpl;
					  var getTpl = demo.innerHTML;
					     laytpl(getTpl).render(res, function(html){
					     $("#view").html(html);
					     //重新初始化
					     $('.i-checks').iCheck({
				                checkboxClass: 'icheckbox_square-green',
				                radioClass: 'iradio_square-green',
				            });
					     //全选操作
					     $('#checkAll').on('ifChecked', function(event){
					 		$('.i').iCheck('check');
					 	 });
					 	 $('#checkAll').on('ifUnchecked', function(event){
					 		$('.i').iCheck('uncheck');
					 	 });
					 	 //选中状态设置tr背景
					 	 $('.i').on('ifChecked', function(){
					 		$(this).closest('tr').addClass("success");
					 	 });
					 	 $('.i').on('ifUnchecked', function(){
					 		$(this).closest('tr').removeClass("success");
					 	 });
					     });
					  laypage({
						    cont: 'page', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
					        pages: res.totalPage, //通过后台拿到的总页数
					        curr: curr || 1, //当前页
						    jump: function(obj, first){ //触发分页后的回调
						        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
						        	//绑定页码
						        	$("#search").data("pageNumber",obj.curr);
						        	list(obj.curr);
						        }
						      }
						  });
				});
			}
		});
    }
    $(function(){
    	//全选
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    	    //初始化table
    	    list(1);
    	    $("#search").data("pageNumber",1)
    	    //查询
    	    $("body").on("click","#search",function(){
        		list(1);
        	});
    	    //重置
    	    $("body").on("click","#resetting",function(){
        		$(".form-control").val("");
        		list(1);
        	});
      	    //删除一条
    	    $("body").on("click",".delone",function(){
    	    	var $button = $(this);
    	    	layer.confirm('确认要删除该记录吗？', {
    	    		  title: '删除确认',
    	    		  btn: ['确定','取消'] //按钮
    	    		}, function(){
    	    			$.ajax({
			                url:'/g/delOne',
			                type:'POST', //GET
			                data:{"id":$button.attr("value")},
			                timeout:5000,    //超时时间
			                dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
			                success:function(data,textStatus,jqXHR){
			                //刷新
			                list($("#search").data("pageNumber"));
			                layer.msg(data.msg, {icon: 1});
			                },
			                eorror:function(){
			                layer.msg('网络发生错误，请联系管理员！', {icon: 2});
			                }
			            });
    	    		}, function(){
    	    		});
        	});
      	    //同步数据库
    	    $("body").on("click","#synDataBase",function(){
    	    	var $button = $(this);
    	    	layer.confirm('确认要同步全部数据库吗？', {
    	    		  title: '同步确认',
    	    		  btn: ['确定','取消'] //按钮
    	    		}, function(){
    	    			$.ajax({
			                url:'/g/synDataBase',
			                type:'POST', //GET
			                timeout:5000,    //超时时间
			                dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
			                success:function(data,textStatus,jqXHR){
			                //刷新
			                list($("#search").data("pageNumber"));
			                layer.msg(data.msg, {icon: 1});
			                },
			                eorror:function(){
			                layer.msg('网络发生错误，请联系管理员！', {icon: 2});
			                }
			            });
    	    		}, function(){
    	    		});
        	});
    	  //编辑
    	    $("body").on("click","#edit",function(){
    	    	var $button = $(this);
    	    		//var url = $(this).attr('data-url');
    	    		var str="";
    	    		var ids="";
    	    		$("input[class='i-checks i']:checkbox").each(function(){
    	    		if(true == $(this).is(':checked')){
    	    		str+=$(this).val()+",";
    	    		}
    	    		});
    	    		if(str.substr(str.length-1)== ','){
    	    		ids = str.substr(0,str.length-1);
    	    		}
    	    		if(ids==""){
    	    			layer.msg('请选择一条记录！', {icon: 1});
    	    			return false;
    	    		}
    	    		if(ids.indexOf(",") >= 0){
    	    			layer.msg('只能选择一条记录！', {icon: 1});
    	    			return false;
    	    		}
    	    	   layer.open({
    	    		  type: 2,
    	    		  skin: 'layui-layer-demo', //样式类名
    	    		  anim: 2,
    	    		  area: ['70%', '90%'],
    	    		  shadeClose: true, //开启遮罩关闭
    	    		  content: '/g/edit/'+ids
    	    		});
        	});
    	    //代码生成
    	    $("body").on("click","#gStart",function(){
    	    	var $button = $(this);
    	    		//var url = $(this).attr('data-url');
    	    		var str="";
    	    		var ids="";
    	    		$("input[class='i-checks i']:checkbox").each(function(){
    	    		if(true == $(this).is(':checked')){
    	    		str+=$(this).val()+",";
    	    		}
    	    		});
    	    		if(str.substr(str.length-1)== ','){
    	    		ids = str.substr(0,str.length-1);
    	    		}
    	    		if(ids==""){
    	    			layer.msg('请选择一条记录！', {icon: 1});
    	    			return false;
    	    		}
    	    		if(ids.indexOf(",") >= 0){
    	    			layer.msg('只能选择一条记录！', {icon: 1});
    	    			return false;
    	    		}
    	    		layer.confirm('确认要生成代码吗？', {
      	    		  title: '生成确认',
      	    		  btn: ['确定','取消'] //按钮
      	    		}, function(){
      	    			$.ajax({
  			                url:'/g/start',
  			                type:'POST', //GET
  			                data:{"ids":ids},
  			                timeout:5000,    //超时时间
  			                dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
  			                success:function(data,textStatus,jqXHR){
  			                layer.msg(data.msg, {icon: 1});
  			                },
  			                eorror:function(){
  			                layer.msg('网络发生错误，请联系管理员！', {icon: 2});
  			                }
  			            });
      	    		}, function(){
      	    		});
        	});
    	  //绑定tr点击事件
		 	 $("#view").on("click","tr",function(){
		 		$(this).find(".i").iCheck('toggle');
   	     });
    });
    </script>

</body>

</html>
